<template>
  <!--背景图片-->
  <q-img
    src="bg/sage_bg.jpg"
    class="fullscreen"
    fit="cover"
    style="z-index: -1"
  />
  <!--遮罩颜色-->
  <div class="fullscreen" :class="ui.modelClass" style="z-index: -1"></div>
  <q-card
    class="absolute-center front"
    :dark="ui.isDark"
    bordered
    :class="ui.cardClass"
  >
    <q-card-section>
      <!--logo-->
      <q-img :src="ui.bigLogo" style="width: 12rem" />
    </q-card-section>
    <!--分割线-->
    <q-separator :dark="ui.isDark" inset class="orientation-portrait" />
    <q-card-section v-if="mode === 'device' || mode === 'mobile'">
      <!--欢迎语-->
      <div class="q-gutter-sm">
        <div class="text-h4 text-bold">
          欢迎使用
          <q-badge
            color="accent"
            class="text-h5"
            v-if="mode !== 'device'"
            :label="mode === 'mobile' ? '移动端' : 'PC端'"
          />
        </div>
      </div>
    </q-card-section>
    <!--登录输入框-->
    <q-form @submit="login" v-else>
      <q-card-section>
        <div class="flex justify-center">
          <div class="q-gutter-y-sm text-center" style="max-width: 18rem">
            <q-input
              class="text-h6"
              outlined
              v-model="user.username"
              placeholder="请输入用户名"
              :dark="ui.isDark"
              lazy-rules
              :rules="[(val) => (val && val.length > 0) || '用户名不得为空']"
            />
            <q-input
              class="text-h6"
              v-model="user.password"
              outlined
              :type="isPwd ? 'password' : 'text'"
              lazy-rules
              :rules="[(val) => (val && val.length > 0) || '密码不得为空']"
              placeholder="请输入密码"
              :dark="ui.isDark"
            >
              <template v-slot:append>
                <q-icon
                  :name="isPwd ? 'visibility_off' : 'visibility'"
                  class="cursor-pointer"
                  @click="isPwd = !isPwd"
                />
              </template>
            </q-input>
          </div>
        </div>
      </q-card-section>
      <q-card-section>
        <!--登录按钮-->
        <q-btn
          outline
          class="text-bold text-h6"
          padding="0.5rem 4rem"
          label="登录"
          type="submit"
          rounded
        />
      </q-card-section>
    </q-form>
    <q-card-section>
      <!--进入按钮-->
      <q-btn
        outline
        class="text-bold text-h6"
        padding="0.5rem 4rem"
        label="进入系统"
        @click="login"
        rounded
        v-if="mode === 'device' || mode === 'mobile'"
      />
    </q-card-section>
  </q-card>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useUiStore } from "stores/ui";
import { useFunctionsStore } from "stores/functions";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import axios from "axios";
import { useAPIStore } from "stores/api";
import { useQuasar } from "quasar";

const $q = useQuasar();
const ui = useUiStore();
const router = useRouter();
const { role, userInfo, mode } = storeToRefs(useFunctionsStore());
// 用户实体
const user = ref({
  username: "",
  password: "",
});
// 是否显示密码
const isPwd = ref(true);
// 登录
function login() {
  if (useFunctionsStore().mode === "server") {
    axios
      .create({
        baseURL: useAPIStore().centerUrl,
        auth: {
          username: user.value.username,
          password: user.value.password,
        },
      })
      .get("user/login")
      .then((rs) => {
        if (rs.data) {
          // 设置session用于登录判断
          role.value = rs.data.role;
          userInfo.value = JSON.stringify(rs.data);
          localStorage.setItem(
            "Authorization",
            rs.config.headers.Authorization.toString().slice(6)
          );
          router.push("/main");
          $q.notify({
            type: "positive",
            message: "登录成功",
            position: "top",
          });
        } else {
          $q.notify({
            type: "negative",
            message: "用户未授权，请联系管理员授权",
            position: "bottom",
          });
        }
      })
      .catch((e) => {
        if (e.response.status === 401) {
          $q.notify({
            type: "negative",
            message: "账号或密码错误，请重试",
            position: "bottom",
          });
        } else {
          $q.notify({
            type: "warning",
            message:
              "登录超时，请检查网络连接后重试。当前中控ip为：" +
              useAPIStore().centerIP,
            position: "bottom",
            timeout: 2000,
          });
        }
      });
  } else {
    role.value = "role";
    router.push("main");
  }
}
</script>

<style lang="scss" scoped>
.front {
  z-index: 1;
  vertical-align: middle;
  text-align: center;
  border-radius: 2rem;
  max-width: 80vw;
  min-width: 60vw;
}
</style>
